<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Rotating Cylinder</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = 'bold 20px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Geometry Parameters ---
        const cx = 300;
        const cy = 180;
        const cylinderLength = 280;
        const cylinderRadius = 55;

        const startX = cx - cylinderLength / 2;
        const endX = cx + cylinderLength / 2;
        const topY = cy - cylinderRadius;
        const bottomY = cy + cylinderRadius;

        // --- Drawing Functions ---

        function drawArrow(ctx, x1, y1, x2, y2, size = 8) {
            const angle = Math.atan2(y2 - y1, x2 - x1);
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
        }

        // --- Draw Components ---

        // 1. Draw the cylinder body
        ctx.beginPath();
        // Top line
        ctx.moveTo(startX, topY);
        ctx.lineTo(endX, topY);
        // Bottom line
        ctx.moveTo(startX, bottomY);
        ctx.lineTo(endX, bottomY);
        // Right end cap (arc)
        ctx.arc(endX, cy, cylinderRadius, -Math.PI / 2, Math.PI / 2);
        ctx.stroke();

        // 2. Draw the left opening (ellipse)
        ctx.beginPath();
        ctx.ellipse(startX, cy, cylinderRadius * 0.4, cylinderRadius, Math.PI / 2, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw the central axis (z-axis)
        ctx.beginPath();
        ctx.setLineDash([10, 6]);
        const axisStartX = startX - 20;
        const axisEndX = endX + 60;
        ctx.moveTo(axisStartX, cy);
        ctx.lineTo(axisEndX, cy);
        ctx.stroke();
        
        // Draw z-axis arrowhead and label
        ctx.setLineDash([]);
        ctx.beginPath();
        drawArrow(ctx, axisEndX - 10, cy, axisEndX, cy, 10);
        ctx.stroke();
        ctx.fillText('z', axisEndX + 15, cy);

        // 4. Draw rotation symbol (ω)
        const rotX = endX + 20;
        const rotRadiusX = 12;
        const rotRadiusY = 25;
        ctx.beginPath();
        ctx.ellipse(rotX, cy, rotRadiusX, rotRadiusY, 0, Math.PI * 1.5, Math.PI * 0.5);
        drawArrow(ctx, rotX, cy + rotRadiusY, rotX, cy - rotRadiusY, 8);
        ctx.stroke();
        ctx.fillText('ω', rotX + rotRadiusX + 15, cy);

        // 5. Draw dimensions
        // Length (l)
        const dimY = bottomY + 40;
        ctx.beginPath();
        ctx.moveTo(startX, dimY);
        ctx.lineTo(endX, dimY);
        // T-ends for length
        ctx.moveTo(startX, dimY - 6);
        ctx.lineTo(startX, dimY + 6);
        ctx.moveTo(endX, dimY - 6);
        ctx.lineTo(endX, dimY + 6);
        ctx.stroke();
        ctx.fillText('l', cx, dimY + 18);

        // Radius (a) and Diameter (T symbol in original)
        const dimX = startX - 50;
        ctx.beginPath();
        // The vertical line for diameter
        ctx.moveTo(dimX, topY);
        ctx.lineTo(dimX, bottomY);
        // Top T-end
        ctx.moveTo(dimX - 6, topY);
        ctx.lineTo(dimX + 6, topY);
        // Middle T-end (for radius)
        ctx.moveTo(dimX - 6, cy);
        ctx.lineTo(dimX + 6, cy);
        // Bottom T-end
        ctx.moveTo(dimX - 6, bottomY);
        ctx.lineTo(dimX + 6, bottomY);
        ctx.stroke();
        // Label 'a' for radius
        ctx.fillText('a', dimX - 20, cy - cylinderRadius / 2);
        
        // --- Draw Caption ---
        ctx.font = 'bold 22px serif';
        ctx.fillText('Fig. 2.14', cx, canvas.height - 30);

    </script>
</body>
</html>